<template>
  <div class="page1">
    <div class="title">{{ $t('license.totalTitle') }}</div>
    <div style="margin-bottom: 16px">
      {{ $t('license.timeSel') }}
      <a-range-picker
        :open="open"
        :default-value="value"
        :placeholder="[
          $t('operationLog.startDate'),
          $t('operationLog.endDate'),
        ]"
        format="YYYY-MM-DD"
        @change="onPickerChange"
        @openChange="openChange"
      >
        <a-icon slot="suffixIcon" type="calendar" />
      </a-range-picker>
    </div>
    <rj-table
      class="upgrade-device-list"
      :columns="columns"
      :data-source="list"
      :rowKey="(row) => row.sn"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="time" slot-scope="text">
        {{ dealTime(text) }}
      </template>
    </rj-table>
  </div>
</template>
<script>
import moment from 'moment-timezone';
import { requestHttp, maccApi } from '@utils/index';
import { RjTable } from '@components';
import { i18nRender } from '@/locales';
const COLUMNS = [
  {
    title: i18nRender('license.totaltime'),
    dataIndex: 'updateTime',
    key: 'updateTime',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: i18nRender('license.devtotal'),
    dataIndex: 'usedPackage',
    key: 'usedPackage',
  },
  {
    title: i18nRender('license.totaldesc'),
    dataIndex: 'description',
  },
];

export default {
  name: 'licenseToal',
  props: {},
  components: {
    'rj-table': RjTable,
  },
  data() {
    return {
      columns: COLUMNS,
      selectedRowKeys: [],
      selectedRows: [],
      list: [],
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
      },
      startTime: '',
      endTime: '',
      visible: false,
      fileList: [],
      open: false,
      isExitLicense: false,
      value: [
        moment().subtract(9, 'days').startOf('days').format('YYYY-MM-DD'),
        moment().subtract(0, 'days').startOf('days').format('YYYY-MM-DD'),
      ],
    };
  },

  mounted() {
    // this.value = [
    //   moment().subtract(9, 'days').startOf('days').format('YYYY-MM-DD'),
    //   moment().subtract(1, 'days').startOf('days').format('YYYY-MM-DD'),
    // ];
    this.startTime = moment().subtract(9, 'days').startOf('days').format('x');
    this.endTime = moment().subtract(1, 'days').startOf('days').format('x');
    console.log(this.value);
    this.timezone = this.$store.state.User.userInfo.timeZone;
    this.initView();
  },
  created() {},
  methods: {
    initView() {
      this.getList();
    },
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
      this.getList();
    },
    /**
     *
     * 获取列表
     * */
    async getList() {
      const ret = await requestHttp({
        api: `${maccApi.LICENSE_HISTORY_LIST_API}?page=${this.pagination.current}&per_page=${this.pagination.pageSize}&start_time=${this.startTime}&end_time=${this.endTime}`,
        method: 'GET',
      });
      if (ret.code == 0) {
        this.list = ret.list;
        this.pagination.total = ret.totalCount;
      } else {
        this.list = [];
        this.pagination.total = 0;
      }
    },
    dealTime(value) {
      return moment(value).tz(this.timezone).format('YYYY/MM/DD HH:mm:ss');
    },
    //时间发生变化的回调
    onPickerChange(date, dateString) {
      this.open = false;
      this.startTime = moment(dateString[0]).startOf('days').format('x');
      this.endTime = moment(dateString[1]).endOf('days').format('x');
      this.getList();
    },

    //弹出日历和关闭日历的回调
    openChange() {
      this.open = !this.open;
    },
  },
  watch: {},
  computed: {},
};
</script>
<style lang="less" scoped>
.page1 {
  text-align: left;
  .title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 16px;
  }
}
.flex-between {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
</style>
